#{extends 'magicBox.html' /}
#{if project}	
	#{set 'title'}
	Roles #{if connected.in(project).can('addRole')}
		<a href="javascript:overlayOpen('/admin/roles/new?id=${project?.id}')" title="Add new role"><img src="@{'/public/images/famfam/add.png'}"></a>
	#{/if}
	#{/set}
	#{if connected.in(project).can('manageRoles')}
		#{note 'highlight'}These are your project roles. Members in a project may have more than one role at a time. Whenever possible, avoid editing roles to limit confusion for developers. If you'd like to give a developer more access, add him to a new role. All members joining a project join the base role automatically. Click a star to set that role as base role.#{/note}
	#{/if}
#{/if}
#{else}
	#{set title: 'Global Roles' /}
	#{note}These are the default roles. All projects created include these roles by default. Changes to these roles does NOT affect roles of projects already created. The base role is highlighted in bold. All members joining a project join the base role automatically. Click a star to set that role as base role.#{/note}
#{/else}
#{list roles, as:'role'}
	<div class="bar"><div class=" #{if role.baseRole}baseRole #{/if} all-roles-${role.project.id} role-div-${role.id}">#{if connected.in(project).can('deleteRole')}<span class="delete_img"><a href="#" onclick="delete_role(${role.id}, this)"><img src="@{'/public/images/famfam/delete.png'}" title="Delete role"></a></span>#{/if}#{if connected.in(project).can('editRole')}<a href="#" onclick="overlayOpen('/admin/roles/${role.id}')"><img title="Edit" src="@{'/public/images/famfam/pencil.png'}"></a>#{/if}#{if connected.in(project).can('manageRoles')} <span class="tick_img"><a href="#" onclick="setBaseRole(${role.id}, ${role.project.id})"><img title="Set base role" src="/public/images/famfam/star.png" alt=""></a></span>#{/if}
	#{ifnot user.roles.contains(role)}	
		#{if requestedRoles.contains(role)}
			<div class="dim"><a href="#" onclick="deleteRequest(${role.id});"><img title="Remove Request" src="@{'public/images/famfam/group_delete.png'}"></a></div>
		#{/if}
		#{else}
			<a href="#" onclick="requestRole(${role.id});">
			<img title="Request Role" src="@{'public/images/famfam/group_go.png'}">
			</a>
		#{/else}
	#{/ifnot}
	
	#{elseif !role.baseRole}
	  <a href="#" onclick="revokeRole(${role.id},${role.baseRole}, ${user.id}, ${role.project.id});">
	  <img title="Revoke Role" src="@{'public/images/famfam/group_delete.png'}">
	  </a>
	#{/elseif}
	</div>
	#{if !role.baseRole} 
        ${role.name}  
    #{/if} 
      
    #{else} 
        <span title="Base Role"> <i>${role.name}</i> </span> 
    #{/else}
	</div>
#{/list}